<template>
	<view class="deductionAmountPage">


		<block>
			<view class="">
				其他余额
			</view>
			<view class="margin_40rpx_0 border-bottom-ededed  padding-bottom_20rpx">
				<input @focus="focusInput()" class="uni-input" v-model="form.changeValue" placeholder="自定义充值金额" />
			</view>
			<view class="flex-between">
				<view class="">
					充值余额
				</view>


			</view>
			<view class="flex-wrap-justifyBetween">
				<block v-for="(item,index) in balanceRechargeList" :key="index">
					<view @click="switchRechargePrice(index,item)"
						:class="['flex-column',currentIndex == index?'cashierSelectionContent':'cashierSelectionContent-noActive']">
						<view class="margin-bottom_10rpx font-weight_bold" style="color: rgb(255, 0, 0);">
							￥{{item.amount}}
						</view>
						<view class="">
							<text style="color: rgb(51, 51, 51);">赠送{{item.give_amount}}</text>
						</view>
					</view>
				</block>

				<!-- <view class="cashierSelectionContent flex-column">
					<view class="margin-bottom_10rpx font-weight_bold" style="color: rgb(255, 0, 0);">
						可抵:3.65元
					</view>
					<view class="">
						<text style="color: rgb(51, 51, 51);">积分不足</text>
					</view>
				</view>
				<view class="cashierSelectionContent-noActive flex-column">
					<view class="margin-bottom_10rpx font-weight_bold" style="color: rgb(51, 51, 51);">
						可抵:3.65元
					</view>
					<view class="">
						<text style="color: rgb(153, 153, 153);">积分不足</text>
					</view>
				</view> -->
			</view>
		</block>
		<view class="flex fixed">
			<view class="scanCodeBtn flex margin-right_16rpx" @click="prePay()">
				上一步
			</view>
			<view class="nextBtn flex" @click="nextPay()">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				currentIndex: 0,
				tabIndex: 4,


				current: 0,
				form: {
					id: '',
					cashierType: '0',
					// 抵扣类型
					deductionType: "0",
					balance: '',
					integral: '',
					// 充值余额
					amount: '',
					// 其他余额
					changeValue: '',
				},
				deductionType: null,
				// 充值列表
				balanceRechargeList: [],
				token: uni.getStorageSync('login').token,

			}
		},
		onLoad(options) {
			console.log(options)
			// 0 消费扣款 1 余额充值 2开通套餐卡


			this.$sun.assignObject(this.form, {
				...options
			})
			console.log(this.form)
			this.deductionType = options
			this.init()

		},
		onShow() {
			this.$at.releaseKey('submitPay');
		},
		methods: {
			focusInput() {
				console.log('1231')
				// 在线充值列表失去焦点
				this.currentIndex = 200
				this.form.amount = ''
			},
			switchRechargePrice(index, item) {
				this.form.changeValue = ''
				this.form.amount =  Number(item.amount)
				this.currentIndex = index
			},
			async init() {
				// 充值余额列表
				const result = await this.$http.post({
					url: this.$api.payAmount,
					data: {


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
                   this.currentIndex = 0
					this.balanceRechargeList = result.data.list
					this.form.amount = result.data.list[this.currentIndex].amount
					
				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			radioChange(item) {
				// 0 消费扣款 1 抵扣套餐卡
				console.log(item)
				this.form.deductionType = item.detail.value
				this.current = item.detail.value
			},
			// 上一步
			prePay() {
				this.$sun.navBack()
			},
			nextPay() {
				// 下一步
				if (this.form.amount || this.form.changeValue) {
					// 0 消费扣款 1 余额充值 2开通套餐卡
					this.$at.uniDoFunc({
						key: 'submitPay',
						success: async () => {
							this.$at.lockKey('submitPay');
							// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择

							console.log(this.form)
							this.$at.releaseKey('submitPay');


							this.$sun.navTo('/pages/cashierSystem/rechargeGift/rechargeGift', {
								...this.form
							})
						}
					});

				} else {

					this.$sun.toast('请选择金额或者输入金额','none')
				}


			}
		}
	}
</script>

<style lang="less" scoped>
	.deductionAmountPage {
		padding: 40rpx;

		.cashierSelection {

			padding: 30rpx;

			.image {
				width: 56rpx;
				height: 56rpx;
			}

			background: rgb(255, 255, 255);
		}

		.cashierSelectionContent {
			margin-top: 30rpx;

			padding: 30rpx;
			width: 322.96rpx;
			height: 171.56rpx;

			background: rgb(255, 246, 246);
		}

		.cashierSelectionContent-noActive {
			margin-top: 30rpx;
			padding: 30rpx;
			width: 322.96rpx;
			height: 171.56rpx;

			box-sizing: border-box;
			border: 2rpx solid rgb(228, 227, 227);
			background: rgb(255, 255, 255);
		}

		.fixed {

			position: fixed;
			bottom: 20rpx;

			.scanCodeBtn {
				width: 268.32rpx;
				height: 96rpx;
				box-sizing: border-box;
				border: 2rpx solid rgb(0, 87, 254);
				background: rgb(255, 255, 255);
				color: rgb(0, 87, 254);
			}

			.nextBtn {
				width: 390.08rpx;
				height: 96rpx;
				background: rgb(0, 87, 254);
				color: rgb(255, 255, 255);
			}
		}
	}

	page {
		background: #fff;
	}
</style>